import React, { useEffect } from 'react';
import { useCustomState } from "../models/customState";
import config from "../../../config/config";
import TextChatDialog from "../../../components/textChatDialog/TextChatDialog";

const CustomPage = () => {

    const {
        loading, setLoading,
        textChatMessages, setTextChatMessages,
        selectedPattern, setSelectedPattern,
        focusBlurFlag, setFocusBlurFlag,
        completeStatus, setCompleteStatus,
        workflowGraph, setWorkflowGraph,
        onSendChat, loadWorkflowGraph,
        markdownTemplate, setMarkdownTemplate
    } = useCustomState();

    useEffect(() => {
        loadWorkflowGraph();
    }, []);

    const patternOptions = config.agent_patterns.map(item => {
        let optionObj = new Object();
        optionObj.label = item.key + "（" + item.name + "）";
        optionObj.value = item.key;
        optionObj.disabled = item.disabled;
        return optionObj;
    });

    const textChatDialogProps = {
        loading,
        libraryVisible: false,
        pageSource: "custom",
        textChatMessages,
        setTextChatMessages,
        selectedPattern,
        focusBlurFlag,
        completeStatus,
        patternOptions,
        workflowGraph,
        selectDocument: null,
        focusBlurTextArea: setFocusBlurFlag,
        markdownTemplate,
        setMarkdownTemplate,
        selectPattern: (pattern) => {
            setSelectedPattern(pattern);
        },
        onSendChat: (values, query) => onSendChat(values, query)
    }

    return (
        <div style={{ width: "100%", height: "100%" }}>
            <TextChatDialog { ...textChatDialogProps } />
        </div>
    );
};

export default CustomPage;
